<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hier sind wir!</title>
<jsp:include page="head.htm"/>
</head>
<body>
	<div id="head">
		<h1>HotelOrganizer</h1>
	</div>
	<jsp:include page="menu-head.htm"/>
	<jsp:include page="menu-kunde.htm" />
	<div id="content">
		<h2>
			<c:out value="${title}" />
		</h2>
		<p>
			<c:out value="${message}" />
		</p>

		<script
			src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUw6lJKFJxXaejBEYCSUJqRTwM0brOpm-All5BF6PoaKBxRWWERTGIs7yO-cchNT_FdZVzYKd6GVY7g"
			type="text/javascript"></script>

		<script type="text/javascript">
			var map;
			var gdir;
			var geocoder = null;
			var marker;
			var htmlInfoWindow;
			/* Die Funktion load() wird bei Seitenaufruf ausgeführt */
			function load() {
				if (GBrowserIsCompatible()) {
					/* Kompatibilitätsprüfung des Browsers und Aufruf einer neuen Karte */
					map = new GMap2(document.getElementById("map"));
					/* Zentrierung der Karte auf das Ziel durch die übergebenen Koordinaten, Zoomfaktor der Karte (größere Zahl -> größerer Zoom) und die Kartenoption die default geladen wird */
					map.setCenter(new GLatLng(48.829385, 12.956303), 16,
							G_HYBRID_MAP);
					map.addControl(new GLargeMapControl());
					gdir = new GDirections(map, document
							.getElementById("directions"));
					GEvent.addListener(gdir, "load", onGDirectionsLoad);
					GEvent.addListener(gdir, "error", handleErrors);
					/* Ein Marker der auf das Ziel zeigt */
					marker = new GMarker(new GLatLng(48.829385, 12.956303));
					map.addOverlay(marker);
					
					/* Sprechblase mit beschreibenden Informationen zum Ziel, wird standardmäßig dargestellt, durch Klick schließbar und wieder aufrufbar durch Klick auf den Marker */
					htmlInfoWindow = '<h3 style="margin-top:0px;">Hier ist unser Hotel!</h3>Adresse:<br />Edlmairstraße 6+8<br />94469 Deggendorf<br />';
					marker.openInfoWindowHtml(htmlInfoWindow);
					GEvent.addListener(marker, "click", function() {
						marker.openInfoWindowHtml(htmlInfoWindow);
					});
				}
			}

			function setDirections(fromAddress, toAddress, locale) {
				gdir.load("from: " + fromAddress + " to: " + toAddress, {
					"locale" : locale
				});
			}
			/* Abfangen der verschiedenen Eingabefehler */
			function handleErrors() {
				if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
					alert("Es wurde kein entsprechender Ort zu Ihrer Routenberechnung gefunden!\nError code: "
							+ gdir.getStatus().code);
				else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
					alert("Leider konnte keine Route berechnet werden!\n Error code: "
							+ gdir.getStatus().code);

				else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
					alert("Der HTTP q Parameter fehlt oder hat keinen Inhalt!\n Error code: "
							+ gdir.getStatus().code);
			/* ein fehlerhafter API-Key wird abgefangen
			API-Keys für jede einzelne Domain nötig */
				else if (gdir.getStatus().code == G_GEO_BAD_KEY)
					alert("Der angegeben API Key ist für eine andere Domain. \n Error code: "
							+ gdir.getStatus().code);
				
				else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
					alert("Leider ist ein Fehler bei der Routenberechnung aufgetreten.\n Error code: "
							+ gdir.getStatus().code);
				else
					alert("Ein unbekannter Fehler trat auf!");

 			}
			
 			function onGDirectionsLoad() {
 				
			}

			//
		</script>
		<!-- Ruft bei Seitenaufruf die Methode load() und beim Beenden die Funktion GUnload() auf -->
		<body onload="load()" onunload="GUnload()">

			<h2>Anfahrt</h2>
			<p>So finden Sie den Weg zu unserem Hotel</p>
			<form action="#"
				onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
				<table align="center">
					<tr>
						<td align=right>Start:&nbsp;</td>
						<!-- Texteingabefeld für die Startadresse, löscht Inhalt bei Klick in das Feld -->
						<td><input type="text" size="30" id="fromAddress" name="from"
							onclick="this.value='';" onfocus="this.select()"
							onblur="this.value=!this.value?'Bitte geben Sie ihren Ort an':this.value;"
							value="Bitte geben Sie ihren Ort an" /></td>
						<!-- <th align="right">&nbsp;&nbsp;Zielort:&nbsp;</th> -->
						<td align="right"><input type="hidden" size="40" id="toAddress"
							name="to" value="48.829385, 12.956303" /></td>
					</tr>
					<tr>
						<td>Sprachauswahl:&nbsp;</td>
						<td colspan="3"><select id="locale" name="locale">
								<option value="de" selected>Deutsch</option>
								<option value="en">English</option>
								<option value="fr">French</option>
								<option value="ru">Russisch</option>
								<option value ="es">Espanol</option>
								<option value="it">Italian</option>
								<option value="eu">Basque</option>
								<option value="nl">Dutch</option>

						</select> <input name="submit" type="submit" value="Routenplanung" /></td>
					</tr>
				</table>

			</form>
			<br />
			<table class="directions">
			<!-- 	<tr>
					<th>Weg zu unserem Hotel:</th>
					<th>Karte</th>
				</tr> -->
				<tr>
					<!-- Tabelle mit der Kartenausgabe auf der linken Seite und der Routeninformation rechts, mit den entsprechenden Parametern -->
					<td valign="top"><div id="map" style="width: 400px; height: 400px"></div></td>
					<td valign="top"><div id="directions" style="width: 275px"></div></td>
							
				</tr>
			</table>
	</div>
</body>
</html>
